<template>
  <div class="wrapper">
    <sc-table />
    <el-button type="text" @click="dialogTableVisible = true">测试按钮</el-button>

    <el-dialog title="问题详细" :visible.sync="dialogTableVisible">
      <div class="dialog-question">万古霉素</div>
      <div>
        <el-form ref="form" :model="form">
          <el-input v-model="form.remark" type="textarea" />
          <el-form-item>
            <el-button class="form-reply" type="primary">回复</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style=" height: 500px">
        <el-scrollbar style="height:100%">
          <el-timeline>
            <el-timeline-item timestamp="2018/4/12 20:46" placement="top">
              <el-card>
                <div class="card-wrapper">
                  <div class="card-left">
                    <!--                头像区域-->
                    <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
                  </div>
                  <div class="card-right">
                    <div class="card-item">
                      <div class="card-name">用户名</div>
                      <div class="card-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium consequuntur minima minus placeat praesentium quidem quisquam quos repellendus soluta?</div>
                    </div>
                  </div>
                </div>

              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4/12 20:46" placement="top">
              <el-card>
                <div class="card-wrapper">
                  <div class="card-left">
                    <!--                头像区域-->
                    <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
                  </div>
                  <div class="card-right">
                    <div class="card-item">
                      <div class="card-name">用户名</div>
                      <div class="card-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium consequuntur minima minus placeat praesentium quidem quisquam quos repellendus soluta?</div>
                    </div>

                  </div>
                </div>

              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4/12 20:46" placement="top">
              <el-card>
                <div class="card-wrapper">
                  <div class="card-left">
                    <!--                头像区域-->
                    <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
                  </div>
                  <div class="card-right">
                    <div class="card-item">
                      <div class="card-name">用户名</div>
                      <div class="card-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium consequuntur minima minus placeat praesentium quidem quisquam quos repellendus soluta?</div>
                    </div>
                  </div>
                </div>

              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4/12 20:46" placement="top">
              <el-card>
                <div class="card-wrapper">
                  <div class="card-left">
                    <!--                头像区域-->
                    <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
                  </div>
                  <div class="card-right">
                    <div class="card-item">
                      <div class="card-name">用户名</div>
                      <div class="card-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium consequuntur minima minus placeat praesentium quidem quisquam quos repellendus soluta?</div>
                    </div>
                  </div>
                </div>

              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-scrollbar>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import ScTable from '../childComponent/ScTable'
export default {
  name: 'SpecialReply',
  components: {
    ScTable
  },
  data() {
    return {
      dialogForm: false,
      dialogTableVisible: false,
      form: {
        name: '',
        remark: ''
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
    }
  }
}
</script>

<style scoped lang="scss">
  @import "../../../components/dialogStyle.css";
  .wrapper{
    padding: 20px;
  }
  /deep/.el-card__body{
    padding: 10px;
  }
  /deep/.el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .dialog-question{
    font-size: 20px;
    padding-bottom: 20px;
  }
  /deep/.el-form-item__content{
    text-align: right;
  }
  .form-reply{
    margin-top: 10px;
    margin-right: 0;
  }
  .question{
    padding-bottom: 20px;
  }
  .card-wrapper{
    display: flex;
    .card-left{
      width: 65px;
      height: 65px;
      min-width: 65px;
      min-height: 65px;
      img{
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }
    .card-right{
      margin-left: 20px;
      .card-name{
        font-size: 20px;
      }
      .card-content{
        padding: 5px 0;
        text-indent:2em;
      }
      .card-btns{
        padding: 5px 0;
      }
      .card-result{
        padding: 5px 0;
      }
    }
  }
</style>
